<template>
  <div class="form-item">
    <label v-if="label" class="text_color">{{labelText}}</label>
    <div class="form-body" :class="{ active: active }">
      <div class="pr">
        <van-field
          :type="value_type"
          v-model="username"
          @focus="active = true"
          @blur="active = false"
          :error="error"
          placeholder="请输入密码"
        />
        <div class="field-right-inner">
          <!-- <i class="icon icon-size-20 icon-eye-off" :class="value_type === 'password' ? 'icon-eye-off' : 'icon-eye-on'"  @click="toggleType"></i> -->
          <svg-icon :icon-class="value_type === 'password' ? 'eye' : 'eye-close'" class="icon-color" class-name="svg-icon-password icon-size-20" @click="toggleType"></svg-icon>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Username",
  props: {
    label: {
      type: Boolean,
      default: false
    },
    labelText: {
      type: String,
      default: "请输入手机号"
    }
  },
  data() {
    return {
      username: "",
      error: false,
      active: false,
      value_type: "password",
    };
  },
  methods: {
    toggleType() {
      this.value_type =  this.value_type === 'password' ? 'text' : 'password'
    }
  },
};
</script>
<style lang="scss" scoped>
.field-right-inner{
    position: absolute;
    right: 0;
    top: 0;
}
.text_color {
  color: #fff;
}
</style>